<template>
  <el-container class="home-container">
  <el-header>
    <div>
      <img src="../assets/heima.png" alt="">
      <span>电商后台管理系统</span>
    </div>
    <el-button type="info" @click="exit">退出</el-button>
  </el-header>
  <el-container>
      <!-- 左侧菜单区 -->
      <!-- 宽度动态控制的 折叠 宽度随之变小 -->
    <el-aside :width="width">
      <el-menu
      background-color="#313743"
      text-color="#fff"
      active-text-color="#409eff" unique-opened :collapse="flage" :collapse-transition="false" router :default-active='activePath'>
      <!-- unique-opened 一次只能打开一个标签 -->
      <!-- router 决定 menu菜单中是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
      <!-- 一级菜单 index 为唯一标识 都一样的会联动触发点击   -->
      <!-- 通过双重for循环遍历数据 生成左侧栏 -->
      <div class="openClose" @click="openClose">|||</div>
      <el-submenu :index="item.id+ ''" v-for=" (item, index ) in Munlist"  :key="item.id">
        <!-- 一级菜单的样式 template -->
        <template slot="title">
          <i :class="'iconfont'+' ' +icosAv[index]" ></i>
          <span class="icof">{{item.authName}}</span>
        </template>
        <!-- 二级菜单 -->
        <!-- index 属性决定 点击路由链接后 跳转到的哈希地址 -->
        <el-menu-item :index=" '/'+ itemm.path" v-for="itemm in item.children" :key="itemm.id" @click="avtiveSave('/'+ itemm.path)" >
          <!-- 二级菜单的样式 -->
            <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{itemm.authName}}</span>
        </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>

    </el-aside>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
  data () {
    return {
      Munlist: [],
      icosAv: ['icon-users', 'icon-tijikongjian', 'icon-shangpin', 'icon-danju', 'icon-baobiao'],
      flage: false, // 控制是否折叠
      width: '200px',
      activePath: '' // 决定当前点击哪一个二级菜单
    }
  },
  methods: {
    exit () { // 退出功能
      window.localStorage.clear()
      sessionStorage.clear()
      this.$router.push('/login')
    },
    async getMunlist () {
      const { data: res } = await this.$http.get('menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.Munlist = res.data // 赋值给data  取值渲染
    },
    openClose () { // 控制折叠和展开左侧边栏
      this.flage = !this.flage
      this.width = this.flage ? '64px' : '200px' // 样式宽度跟着动
    },
    avtiveSave (val) {
      window.sessionStorage.setItem('avtivePath', val)
      this.activePath = val // 赋值给data 控制显示哪一个显示被选中
    }
  },
  created () {
    this.getMunlist() // 一加载出来vm 实例就发送请求 并赋值给data中 然后渲染
    this.activePath = window.sessionStorage.getItem('avtivePath') // 获取缓存中的 Index的path值 知道用户点击的是哪一个
  },
  mounted () {
    if (!this.activePath) return // 解决选中左侧选项 不跳转
    if (location.hash.slice(1) === this.activePath) return
    this.$router.push(this.activePath)
  }
}
</script>

<style lang="less" scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  background-color: #363c42;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    >span {
      padding-left: 10px;
    }
  }
}
.el-aside {
  background-color: #313743;
}
.el-main {
  background-color: #e9edf1;
}
.home-container {
  height: 100%;
}
.icof {
  margin-left:10px;
  font-size:12px!important;
}
.openClose {
    background-color: #4a5064;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    cursor: pointer;
    letter-spacing: .12em;

}
.el-menu {
  border-right: none;
}
</style>
